<!--
 * 加载更多组件
-->
<template>
    <page-layout class="page-layout">
        <!-- 基础使用 -->
        <app-demo-module title="基础使用">
            <pure-loadmore status="more"></pure-loadmore>
            <app-gap size="10px"></app-gap>
            <pure-loadmore status="loading"></pure-loadmore>
            <app-gap size="10px"></app-gap>
            <pure-loadmore status="fail"></pure-loadmore>
            <app-gap size="10px"></app-gap>
            <pure-loadmore status="nomore"></pure-loadmore>
        </app-demo-module>

        <!-- 事件 -->
        <app-demo-module title="事件">
            <pure-loadmore status="more" @more="handleMore"></pure-loadmore>
            <app-gap size="10px"></app-gap>
            <pure-loadmore status="fail" @fail="handleFail"></pure-loadmore>
        </app-demo-module>

        <!-- 纵向布局 -->
        <app-demo-module title="纵向布局">
            <pure-loadmore status="loading" vertical></pure-loadmore>
        </app-demo-module>
    </page-layout>
</template>

<script setup>
    import { ref, computed } from "vue";

    // More 事件
    function handleMore() {
        uni.showToast({
            title: "More 事件",
            icon: "none",
            mask: true,
        });
    }

    //  Fail 事件
    function handleFail() {
        uni.showToast({
            title: "Fail 事件",
            icon: "none",
            mask: true,
        });
    }
</script>

<style scoped lang="scss"></style>
